<template>
  <view class="vehicle">
    <view class="vehicle-search">
      <uni-section type="line">
      	<uni-search-bar @confirm="search" v-model="searchValue" @blur="blur" 
          @focus="focus" @input="input" @clear="clear" cancelButton="none"
          placeholder="请输入车型品牌或车系名称">
      	</uni-search-bar>
        <button class="vehicle-search-button" @click="vehicleSearch">查询</button>
      </uni-section>
    </view>
    <view class="row-blue">热门品牌</view>
    <view class="vehicle-automobile">
      <view v-for="(item,index) in automobileList" :key="index" @click="skipSearch(item)">{{item}}</view>
    </view>
    <view class="vehicle-car">
      <view class="vehicle-car-first" v-for="(value,key,index) in spellAutoCarObj" :key="index">
        <view :class="'vehicle-' + key">{{key}}</view>
        <view v-for="(childItem,childIndex) in value" :key="childIndex" 
        @click="skipSearchDouble(key,childIndex)">
          {{childItem}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {automobile,spellAutoCar} from '@/utils/mock.js'
  import {getHotDict,getCarSpell} from '@/api/parts/car.js'
  export default{
    options: {
    			styleIsolation: 'shared', // 解除样式隔离
    },
    data(){
      return{
        searchValue:'',
        automobileList:automobile,
        spellAutoCarObj:spellAutoCar,
      }
    },
    methods:{
      init(){
        getHotDict().then(res=>{
          this.automobileList = res.rows;
        })
        getCarSpell().then(res=>{
          this.spellAutoCarObj = res.data;
        })
      },
      search(){},
      blur(){},
      focus(){},
      input(){},
      clear(){},
      skipSearch(item){
        this.searchValue = item
        this.vehicleSearch()
      },
      skipSearchDouble(key,childIndex){
        // console.log("key",key )
        // console.log("childIndex",childIndex)
        // console.log("this.spellAutoCarObj.key",this.spellAutoCarObj[key][childIndex])
        this.searchValue = this.spellAutoCarObj[key][childIndex]
        this.vehicleSearch()
      },
      vehicleSearch(){
        let value = this.searchValue.trim()
        if(value == ''){
          this.$modal.alert("请输入车型品牌或车系名称")
          return 
        }
        this.searchValue = ''
        console.log("skipBrand")
        this.$tab.navigateTo(`/pages/eCatalog/index?skipBrand=${value}&from=1`)
      },
      /* 首字母锚点跳转 */
      anchorLocaltion(item){
        console.log("item",item)
        let vehicle = uni.createSelectorQuery().in(this).select(`.vehicle .vehicle-${item}`)
        let area =  uni.createSelectorQuery().select(".text-area")
        console.log("vehicle",vehicle.boundingClientRect())
        console.log("area",area.boundingClientRect())
        setTimeout(()=>{  
          vehicle.boundingClientRect(data=>{
            // console.log("data",data)
            area.boundingClientRect(res=>{
            // console.log("res",res)
              uni.pageScrollTo({
                    duration: 100,//过渡时间
                    scrollTop:data.top - res.top  ,//到达距离顶部的top值
              })
            }).exec()
          }).exec();  
        },300)
      },
    },
    created() {
      this.init();
    }
  }
</script>

<style>
  @import url('../../static/style/vehicle/vehicle.css')
</style>